import Cookies from 'js-cookie'
import Vuex, { Commit } from 'vuex'
import { screenMap, sizeEnum, screenEnum } from '@/enums/breakpointEnum'
import { useBrowserInfo } from '@/hooks/web/useBrowserInfo'
export enum themeModel {
  light = 'light',
  dark = 'dark',
  default = 'default',
}

interface Sidebar {
  opened: Boolean
}

interface State {
  sidebar: Sidebar
  darkMode: themeModel
  fixedLeftCard: Boolean
  deviceModelSize: String
  browserVersion: Number
}
const state = {
  sidebar: {
    // 原文是Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    opened: Cookies.get('sidebarStatus') === '0' ? false : true,
  },
  darkMode: themeModel.light,
  fixedLeftCard: false,
  deviceModelSize: 'XXL',
  browserVersion: -1,
  showCNEMR: (() => {
    return process.env.VUE_APP_CNEMR_SHOW === 'true'
  })(),
}

const mutations = {
  TOGGLE_SIDEBAR: (state: State) => {
    // TODO
    console.log('TOGGLE_SIDEBAR state =' + JSON.stringify(state))
    state.sidebar.opened = !state.sidebar.opened
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', '1')
    } else {
      Cookies.set('sidebarStatus', '0')
    }
  },
  CLOSE_SIDEBAR: (state: State, withoutAnimation: Boolean) => {
    state.sidebar.opened = false
  },
  FIXED_LEFTCARD: (state: State) => {
    state.fixedLeftCard = !state.fixedLeftCard
    // if (state.fixedLeftCard) {
    //   Cookies.set('fixedLeftCard', '1')
    // } else {
    //   Cookies.set('fixedLeftCard', '0')
    // }
  },
  SET_DEVICE_SIZE_MODEL: (state: State, widthModel: String) => {
    state.deviceModelSize = widthModel
  },
  SET_BROWSERVERSION: (state: State, browserVersion: Number) => {
    state.browserVersion = browserVersion
  },
}

const actions = {
  toggleSideBar({ commit }: { commit: Commit }) {
    // TODO
    console.log('toggleSideBar change')
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }: { commit: Commit }) {
    commit('CLOSE_SIDEBAR')
  },
  fixedLeftCard({ commit }: { commit: Commit }) {
    commit('FIXED_LEFTCARD')
  },
  setDevice({ commit }: { commit: Commit }, width: Number) {
    console.log('getWindowWidth(width) =' + getWindowWidth(width))
    commit('SET_DEVICE_SIZE_MODEL', getWindowWidth(width))
  },
  setDarkMode({ commit }: { commit: Commit }) {},
  initBrowserInfo({ commit }: { commit: Commit }) {
    const { getBrowserVersion } = useBrowserInfo()
    const version = getBrowserVersion()
    console.log('b version = ' + version)
    commit('SET_BROWSERVERSION', version)
  },
}

function getWindowWidth(width: Number): String {
  const xs = screenMap.get(sizeEnum.XS)!
  const sm = screenMap.get(sizeEnum.SM)!
  const md = screenMap.get(sizeEnum.MD)!
  const lg = screenMap.get(sizeEnum.LG)!
  const xl = screenMap.get(sizeEnum.XL)!
  const xxl = screenMap.get(sizeEnum.XXL)!
  if (width < xs) {
    return sizeEnum.XS
  } else if (width < sm) {
    return sizeEnum.SM
  } else if (width < md) {
    return sizeEnum.MD
  } else if (width < lg) {
    return sizeEnum.LG
  } else if (width < xl) {
    return sizeEnum.XL
  } else if (width < xxl) {
    return sizeEnum.XXL
  } else {
    return sizeEnum.XXXL
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
}
